<template>
  <view>
    <view class="container690 cont">
      <view class="cont1">
        <scroll-view :scroll-into-view="scrollview" class="scroll-view1" :scroll-y="true" enable-flex="true">
          <view class="left">
            <view class="add1" v-for="(item,index) in list" :id="item.letter" :key="index">
              <text class="title">{{item.letter}}</text>
              <view @click="changeCity(item1)" class="city" v-for="(item1,index1) in item.citylist" :key="index1">
                {{item1.text}}
              </view>
            </view>
          </view>
        </scroll-view>
        <scroll-view class="scroll-view2" :scroll-y="true" enable-flex="true">
          <view class="right">
            <text @click="changeLetter(item)" v-for="(item,index) in letters" :key="index">{{item}}</text>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
  import typedata from './gettype.js'
  export default {
    props: {
      letter: {
        type: String,
        default: 'A'
      },
      list: {
        type: Array,
        default: []
      }
    },
    watch: {
      letter: function() {
        this.scrollview = this.letter
      }
    },
    data() {
      return {
        cityName: '重庆',
        scrollview: this.letter,
        // list:[],
        letters: []
      }
    },
    created() {
      this.list = typedata
      for (var i = 0; i < 26; i++) {
        this.letters.push(String.fromCharCode((65 + i)))
      }
    },
    methods: {
      changeLetter(id) {
        this.scrollview = id
        console.log('1111')
      },
      changeCity(obj) {
        this.$emit('confirm', obj)
      }
    }
  }
</script>

<style lang="scss">
  .container690 {
    width: 690rpx;
    margin: 0 auto;
  }

  .cont {
    height: 100vh;
    overflow: hidden;

    .cont1 {
      padding-top: 20rpx;
      display: flex;
      color: #333333;
      justify-content: space-between;
    }

    .scroll-view1 {
      width: 650rpx;
      height: 100vh;
      display: flex;
      justify-content: space-between;

      .left {
        width: 100%;

        .add1 {
          margin-top: 30rpx;

          .title {
            display: block;
            color: #333333;
            font-size: 32rpx;
          }

          .city {
            color: #333333;
            width: 100%;
            height: 100rpx;
            line-height: 100rpx;
            border-bottom: 1px solid #EEEEEE;
          }
        }
      }
    }

    .scroll-view2 {
      width: 40rpx;
      height: 100vh;
      padding-bottom: 30rpx;

      .right {
        width: 100%;
        position: relative;
        z-index: 999;

        text {
          text-align: right;
          display: block;
          color: #333333;
          font-size: 24rpx;
          padding: 6rpx 0;
        }
      }
    }
  }
</style>
